<template>
  <div class="vote-success">
    <div v-title>{{ title }}</div>

    <img class="page-img" src="./images/three-votes.png" alt="">
    <h1>已成功为{{ votedTitle }}再投3票！</h1>
    <p>
      感谢您的加入<br />
      前往“噢啦网”一起参与环保回收
    </p>

    <a class="follow-us" href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIxNjcxNjEwMQ==&scene=124#wechat_redirect">
      关注噢啦网公众号
    </a>

    <a class="download-app" href="http://api.oolagongyi.com/public/get-app?app=oola">
      下载噢啦网app
    </a>
    <img class="f-img" src="../../../../images/activity/download-bottom.png" alt="">
  </div>
</template>

<script>
  import WeixinShareWay from '@/config/weixinShare'
  export default {
    name: 'vote-success',
    data () {
      return {
        title: '噢啦网',
        voteTitle: ''
      }
    },
    created () {
      this.votedTitle = this.$route.query.title
      // console.log('this.votedTitle', this.votedTitle)

      // 微信分享链接
      var shareLink = 'https://www.oolagongyi.com/activities/#/vote-list'
      WeixinShareWay(shareLink)

      // 点击返回，调回到投票详情
      // this.goHome()
    },
    methods: {
      goHome () {
        window.onpopstate = () => {
          // alert('测试监听微信浏览器点击返回事件')
          this.$router.go(-2)
          // this.$router.push({ path: 'vote-list' })
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.vote-success {
  height: 100vh;
  text-align: center;
  background-color: #fff;
  
  .com-btn {
    width: 81.33%;
    height: 45px;
    line-height: 46px;
    font-size: 18px;
    margin: 0 auto;
    border-radius: 6px;
  }
  .follow-us {
    display: block;  
    margin: 53px auto 27px;
    color: #fff;
    background-color: #FFB717;
    @extend .com-btn;
  }
  .download-app {
    display: block;  
    margin: 27px auto;
    color: #FFB717;
    border: 1px solid #FFB717;
    @extend .com-btn;
  }
  p {
    font-size: 12px;
  }
  h1 {
    margin: 30px auto 10px;
    font-size: 16px;
    color: #FFB717;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 24rem;
    text-align: center;
  }
  .f-img {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .page-img {
    display: block;
    width: 128px;
    padding-top: 53.5px;
    margin: 0 auto;
  }
}
</style>
